<div class="box1">
  <input type="text" />
  <ul></ul>
</div>
<div class="box2">
  <button>获取电影</button>
  <ul></ul>
</div>

<script src="./ajax2.js"></script>
<!-- 百度输入框 -->
<script>
  // 语法：get(url, params, callback, headersFn)
  // 思路：
  // 1 布局
  // 2 绑定事件
  document.querySelector(".box1 input").oninput = function() {
    // 3 事件处理函数中 - 请求接口
    // 4 事件处理函数中 - 根据接口返回的数据逻辑处理
    let wd = this.value;
    get(
      "http://www.baidu.com/sugrec",
      `prod=pc&wd=${wd}`,
      res => {
        // console.log(res);
        // 1 清空ul数据
        let ulObj = document.querySelector(".box1 ul");
        ulObj.innerText = "";
        // 2 判断
        if (res.g) {
          res.g.forEach(item => {
            // item就是一个个对象
            let liObj = document.createElement("li");
            liObj.innerText = item.q;

            ulObj.appendChild(liObj);
          });
        }
      },
      xhr => {}
    );
  };
</script>
<!-- 获取电影 -->
<script>
  document.querySelector(".box2 button").onclick = function() {
    let wd = this.value;
    get(
      "https://m.maizuo.com/gateway?",
      "cityId=310100&pageNum=1&pageSize=10&type=1&k=3576785",
      res => {
        //清空ul
        let ulObj = document.querySelector(".box2 ul");
        ulObj.innerHTML = "";
        if (!Array.isArray(res.data.films)) return;
        res.data.films.forEach(item => {
          let liObj = document.createElement("li");
          liObj.innerHTML = `${item.filmId} - 
                ${item.name}
                <img src="${item.poster}" />`;
          ulObj.appendChild(liObj);
        });
      },
      xhr => {
        xhr.setRequestHeader(
          "X-Client-Info",
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1640005088441707321622529","bc":"310100"}'
        );
        xhr.setRequestHeader("X-Host", "mall.film-ticket.film.list");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
      }
    );
  };
</script>
